<template>
  <div class="box">
    <div class="tit">{{title}}</div>
    <div class="li" v-for='item in list' :key="item.id">
      <div class="time flex vc hb">
        <div>{{item.createDate}}</div>
        <div>证书编号：{{item.certificate}}</div>
      </div>
      <div class="flex vc hb">
        <div class='text'>{{item.projectTitle}}</div>
        <div class='num'>{{item.donate}}元</div>
      </div>
      <div v-if="!item.invoice" class="flex vc hb">
        <router-link class="but flex vc" :to="{path:'/invoiceForm', query: {id: item.id, donate: item.donate}}">
          <img src="../../assets/img/invoice/add.png" alt="">申请开票
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { userDonateLogList } from '@/api/donate'
export default {
  data () {
    return {
      title: '',
      list: []
    }
  },

  created () {
    this.title = this.$route.query.title
    userDonateLogList().then(response => {
      this.list = response.data.list
    })
  },

  methods: {}
}
</script>

<style scoped="scoped">
  .but {
    width: 105px;
    height: 32px;
    border: 1px dashed #762A2A;
    padding: 3px 5px;
    color: #762A2A;
    border-radius: 5px;
  }
  .but img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  .box {
    font-size: 17px;
    color: #434343;
    position: relative;
    padding: 0 20px;
  }

  .flex {
    width: auto;
  }

  .tit {
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 0 15px;
  }

  .li {
    padding: 15px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .time {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .text {
    /* font-weight: bold; */
  }

  .num {
    color: #762A2A;
    font-weight: bold;
  }
</style>
